<template>
  <div class="hierarchy-tree">
    <div v-if="!validHierarchyData || validHierarchyData.length === 0" class="empty-state">
      <p>暂无数据</p>
    </div>
    
    <div v-else class="tree-container">
      <!-- 表格头部 -->
      <div class="tree-header">
        <div class="header-cell col-name">名称</div>
        <div class="header-cell col-desc">描述</div>
        <div class="header-cell col-status">状态</div>
        <div class="header-cell col-actions">操作</div>
      </div>
      
      <!-- 树形主体 -->
      <div class="tree-body">
        <template v-for="(page, pageIndex) in validHierarchyData" :key="`page-${page.id}`">
          <!-- 页面行 -->
          <div class="tree-row page-row">
            <div class="tree-cell col-name">
              <div class="name-content">
                <div class="expand-section">
                  <el-button 
                    text 
                    class="expand-btn"
                    @click="toggleExpand(`page-${page.id}`)"
                    v-if="page.categories && page.categories.length > 0"
                  >
                    <el-icon size="12">
                      <ArrowRight v-if="!isExpanded(`page-${page.id}`)" />
                      <ArrowDown v-else />
                    </el-icon>
                  </el-button>
                  <div v-else class="expand-placeholder"></div>
                </div>
                <div class="content-section">
                  <div class="type-icon page-icon">
                    <el-icon size="14"><Document /></el-icon>
                  </div>
                  <span class="item-name">{{ page.name }}</span>
                </div>
              </div>
            </div>
            <div class="tree-cell col-desc">
              <span class="item-desc">{{ page.description || '校园小程序页面' }}</span>
            </div>
            <div class="tree-cell col-status">
              <span class="status-badge status-enabled">启用</span>
            </div>
            <div class="tree-cell col-actions">
              <el-button class="action-btn btn-view" size="small" @click="$emit('view-content', page)">启用</el-button>
              <el-button class="action-btn btn-edit" size="small" @click="$emit('edit-page', page)">编辑</el-button>
              <el-button class="action-btn btn-delete" size="small" @click="$emit('delete-page', page)">删除</el-button>
            </div>
          </div>
          
          <!-- 分类行 -->
          <template v-if="isExpanded(`page-${page.id}`) && page.categories && page.categories.length > 0">
            <template v-for="(category, categoryIndex) in page.categories.filter(cat => cat && cat.id)" :key="`page-${page.id}-category-${category.id}`">
              <div class="tree-row category-row">
                <div class="tree-cell col-name">
                  <div class="name-content level-1">
                    <div class="level-indent"></div>
                    <div class="expand-section">
                      <el-button 
                        text 
                        class="expand-btn"
                        @click="toggleExpand(`category-${category.id}`)"
                        v-if="category.items && category.items.length > 0"
                      >
                        <el-icon size="12">
                           <ArrowRight v-if="!isExpanded(`category-${category.id}`)" />
                           <ArrowDown v-else />
                         </el-icon>
                      </el-button>
                      <div v-else class="expand-placeholder"></div>
                    </div>
                    <div class="content-section">
                       <div class="type-icon category-icon">
                         <el-icon size="14"><Folder /></el-icon>
                       </div>
                       <span class="item-name">{{ category.name }}</span>
                     </div>
                  </div>
                </div>
                <div class="tree-cell col-desc">
                  <span class="item-desc">{{ category.description || category.name + '分类' }}</span>
                </div>
                <div class="tree-cell col-status">
                  <span class="status-badge status-enabled">启用</span>
                </div>
                <div class="tree-cell col-actions">
                  <el-button class="action-btn btn-view" size="small" @click="$emit('view-content', category)">启用</el-button>
                  <el-button class="action-btn btn-edit" size="small" @click="$emit('edit-category', category)">编辑</el-button>
                  <el-button class="action-btn btn-delete" size="small" @click="$emit('delete-category', category)">删除</el-button>
                </div>
              </div>
              
              <!-- 项目行 -->
              <template v-if="isExpanded(`category-${category.id}`) && category.items && category.items.length > 0">
                <template v-for="(item, itemIndex) in category.items.filter(item => item && item.id)" :key="`category-${category.id}-item-${item.id}`">
                  <div class="tree-row item-row">
                  <div class="tree-cell col-name">
                    <div class="name-content level-3">
                      <div class="level-indent level-2"></div>
                      <div class="expand-section">
                        <div class="expand-placeholder"></div>
                      </div>
                      <div class="content-section">
                        <div class="type-icon item-icon">
                          <el-icon size="14"><List /></el-icon>
                        </div>
                        <span class="item-name">{{ item.name }}</span>
                      </div>
                    </div>
                  </div>
                  <div class="tree-cell col-desc">
                    <span class="item-desc">{{ item.description || getItemTypeLabel(item.content_type) }}</span>
                  </div>
                  <div class="tree-cell col-status">
                    <span class="status-badge status-enabled">启用</span>
                  </div>
                  <div class="tree-cell col-actions">
                    <el-button class="action-btn btn-view" size="small" @click="$emit('view-content', item)">启用</el-button>
                    <el-button class="action-btn btn-edit" size="small" @click="$emit('edit-item', item)">编辑</el-button>
                    <el-button class="action-btn btn-delete" size="small" @click="$emit('delete-item', item)">删除</el-button>
                  </div>
                  </div>
                </template>
              </template>
            </template>
          </template>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Document, Folder, List, ArrowRight, ArrowDown } from '@element-plus/icons-vue'

// Props
const props = defineProps({
  hierarchyData: {
    type: Array,
    default: () => []
  },
  pages: {
    type: Array,
    default: () => []
  },
  categories: {
    type: Array,
    default: () => []
  },
  items: {
    type: Array,
    default: () => []
  },
  expandedKeys: {
    type: Array,
    default: () => []
  }
})

// Events
const emit = defineEmits([
  'edit-page',
  'edit-category',
  'edit-item',
  'delete-page',
  'delete-category',
  'delete-item',
  'view-content',
  'manage-page',
  'manage-category',
  'manage-item',
  'node-expand',
  'node-collapse'
])

// 展开状态管理
const toggleExpand = (nodeId) => {
  if (isExpanded(nodeId)) {
    emit('node-collapse', nodeId)
  } else {
    emit('node-expand', nodeId)
  }
}

const isExpanded = (nodeId) => {
  return props.expandedKeys.includes(nodeId)
}

// 过滤有效的层级数据
const validHierarchyData = computed(() => {
  if (!props.hierarchyData || !Array.isArray(props.hierarchyData)) {
    return []
  }
  
  return props.hierarchyData
    .filter(page => page && page.id)
    .map(page => ({
      ...page,
      categories: (page.categories || [])
        .filter(category => category && category.id)
        .map(category => ({
          ...category,
          items: (category.items || []).filter(item => item && item.id)
        }))
    }))
})

// 获取项目类型标签类型
const getItemTypeTagType = (type) => {
  const typeMap = {
    'markdown': 'primary',
    'page': 'success',
    'external': 'warning',
    'component': 'info'
  }
  return typeMap[type] || 'info'
}

// 获取项目类型标签文本
const getItemTypeLabel = (type) => {
  const typeMap = {
    'markdown': 'Markdown',
    'page': '页面',
    'external': '外部链接',
    'component': '组件'
  }
  return typeMap[type] || type
}
</script>

<style scoped>
.hierarchy-tree {
  background: white;
  padding: 0px;
  height: auto;
  min-height: 200px;
  display: flex;
  flex-direction: column;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #9ca3af;
}

/* 树形容器 */
.tree-container {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  background: white;
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
}

/* 树形头部 */
.tree-header {
  display: flex;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
  font-weight: 600;
  color: #374151;
  font-size: 14px;
}

.header-cell {
  padding: 12px 16px;
}

.header-cell:last-child {
  border-right: none;
}

/* 列宽设置 - 四列平分 */
.col-name {
  flex: 1;
  min-width: 0;
}

.col-desc {
  flex: 1;
  min-width: 0;
}

.col-status {
  flex: 1;
  min-width: 0;
}

.col-actions {
  flex: 1;
  min-width: 0;
}

/* 树形主体 */
.tree-body {
  flex: 0 1 auto;
  overflow-y: auto;
  min-height: 0;
  max-height: 75vh;
}

/* 简洁树形行样式 */
.tree-row {
  display: flex;
  transition: background-color 0.2s ease;
  min-height: 56px;
  position: relative;
  font-size: 15px;
  margin-bottom: 2px;
}

.tree-cell {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

/* 简洁层级样式 - 背景从边框条开始 */
.page-row {
  background: linear-gradient(to right, transparent 4px, #eff6ff 4px);
  position: relative;
}

.category-row {
  background: linear-gradient(to right, transparent 36px, #ecfdf5 36px);
  position: relative;
}

.item-row {
  background: linear-gradient(to right, transparent 68px, #fffbeb 68px);
  position: relative;
}

.page-row:hover {
  background: linear-gradient(to right, transparent 4px, #dbeafe 4px);
}

.category-row:hover {
  background: linear-gradient(to right, transparent 36px, #d1fae5 36px);
}

.item-row:hover {
  background: linear-gradient(to right, transparent 68px, #fef3c7 68px);
}

/* 树形缩进样式 */
.tree-indent {
  display: flex;
  align-items: center;
  position: relative;
  height: 32px;
  width: 100%;
}

.tree-indent.level-1 {
  padding-left: 32px;
}

.tree-indent.level-2 {
  padding-left: 64px;
}

.tree-indent.level-3 {
  padding-left: 96px;
}

/* 页面行的边框样式 - 占据整行高度 */
.page-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #3b82f6;
  z-index: 1;
}

/* 分类行的边框样式 - 占据整行高度 */
.category-row::before {
  content: '';
  position: absolute;
  left: 32px;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #10b981;
  z-index: 1;
}

/* 项目行的边框样式 - 占据整行高度 */
.item-row::before {
  content: '';
  position: absolute;
  left: 64px;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #f59e0b;
  z-index: 1;
}

/* 悬停状态下的边框颜色 */
.page-row:hover::before {
  background: #1e40af !important;
}

.category-row:hover::before {
  background: #059669 !important;
}

.item-row:hover::before {
  background: #d97706 !important;
}

/* 树形连接器 */
.tree-connector {
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 8px;
}

/* 简洁展开按钮样式 */
.expand-btn {
  padding: 0 !important;
  margin: 0;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #d1d5db !important;
  color: #6b7280;
  transition: all 0.2s ease;
  position: relative;
  z-index: 3;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.expand-btn:hover {
  background: #f9fafb !important;
  border-color: #9ca3af !important;
  color: #374151;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}



/* 简洁类型图标样式 */
.type-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  margin: 0;
  position: relative;
  z-index: 2;
  transition: all 0.2s ease;
  flex-shrink: 0;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.page-icon {
  color: #475569;
}

.page-icon:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.category-icon {
  color: #475569;
}

.category-icon:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.item-icon {
  color: #475569;
}

.item-icon:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}



/* 名称内容容器 */
.name-content {
  display: flex;
  align-items: center;
  width: 100%;
  font-size: 15px;
  justify-content: space-between;
  position: relative;
}

/* 清晰的缩进和布局结构 */
.level-indent {
  width: 20px;
  flex-shrink: 0;
}

.level-indent.level-2 {
  width: 40px;
}

.expand-section {
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  margin-right: 24px;
}

.expand-placeholder {
  width: 24px;
  height: 18px;
}

.content-section {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 1;
    min-width: 0;
  }

/* 名称样式 */
.item-name {
  font-size: 14px;
  color: #374151;
  font-weight: 500;
  flex: 1;
}

.page-row .item-name {
  font-weight: 600;
}

/* 描述文本 */
.item-desc {
  font-size: 13px;
  color: #6b7280;
}

/* 现代化状态徽章 */
.status-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  letter-spacing: 0.025em;
}

.status-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.5s;
}

.status-badge:hover::before {
  left: 100%;
}

.status-enabled {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

.status-enabled:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.status-disabled {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}

.status-disabled:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* 现代化操作按钮样式 */
.col-actions {
  gap: 6px;
}

.action-btn {
  padding: 6px 12px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
  border: none !important;
  font-weight: 500 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  min-width: auto !important;
  position: relative !important;
  overflow: hidden !important;
  letter-spacing: 0.025em !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.action-btn::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent) !important;
  transition: left 0.5s !important;
}

.action-btn:hover::before {
  left: 100% !important;
}

/* 查看按钮 - 绿色渐变 */
.btn-view {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: white !important;
}

.btn-view:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

/* 编辑按钮 - 蓝色渐变 */
.btn-edit {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
}

.btn-edit:hover {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
}

/* 删除按钮 - 红色渐变 */
.btn-delete {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: white !important;
}

.btn-delete:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
}

/* 文本按钮样式 */
:deep(.el-button--text) {
  background: transparent !important;
  color: #6b7280 !important;
  border: none !important;
  padding: 4px !important;
}

:deep(.el-button--text:hover) {
  background: #f3f4f6 !important;
  color: #374151 !important;
}
</style>